import { useEffect, useState, useMemo } from 'react'
import '../Type/App.css'
import { Input } from 'react-vant'
import { Search, ShoppingCart } from '@react-vant/icons';
import { Sidebar, Toast } from 'react-vant';
import { ArrowDown2, ArrowUp2 } from '@nutui/icons-react'
import axios from 'axios';
export default function Cate() {
  const [val, setVal] = useState("")
  const [fil, setFil] = useState('all')
  const [active, setActive] = useState(0);
  const [list, setList] = useState([])
  const [catels, setCateLs] = useState([])
  const [cid, setcid] = useState('6683d9d10eb3930258f40edb')

  //获取数据
  const getall = async () => {
    let { data: { data } } = await axios.get(`http://127.0.0.1:3000/good/?name=${val}`)
    setList(data)
  }
  //获取类别
  const getcatels = async () => {
    let result = await axios.get('http://127.0.0.1:3000/cate')
    setCateLs(result.data.data)
  }

  //筛选数据
  const newlist = useMemo(() => {
    if (fil == "all") {
      return list
    } else if (fil == "sale") {
      return list.sort((a, b) => b.sale - a.sale)
    } else if (fil == "ASC") {
      return list.sort((a, b) => a.price - b.price)
    } else if (fil == "DESC") {
      return list.sort((a, b) => b.price - a.price)
    }

  }, [fil, list])

  const newLists = useMemo(() => {
    if (cid == '6683d9d10eb3930258f40edb') {
      return newlist
    } else {
      return newlist.filter(item => item.cateid == cid)
    }
  }, [newlist, cid])



  useEffect(() => {
    getall()
    getcatels()
  }, [val])
  return (
    <div>
      <div className='header1'>
        <div className='search_box'>
          <Input
            value={val}
            onChange={(val) => {
              setVal(val)
              getall()
            }}
            placeholder='搜索商品'
            prefix={<Search />}
            className='search_inp'
            clearable
          />
        </div>
      </div>
      <div className='container'>
        <div className="side">
          <Sidebar
            value={active}
            onChange={(v) => {
              setActive(v)
              setcid(catels[v]._id)
            }}
            style={{ '--rv-sidebar-width': '100%' }}
          >
            {catels.map(item => (<Sidebar.Item title={item.cname} key={item._id} style={{ width: '100%' }} />))}
          </Sidebar>
        </div>
        <div className="main">
          <div className="box1">
            <span style={{
              display: 'flex', alignItems: "center"
            }} onClick={() => setFil("all")}>综合 <ArrowDown2 style={{ paddingTop: '9px' }} /></span>
            <span onClick={() => setFil("sale")}>销量</span>
            <span style={{
              display: 'flex', alignItems: "center"
            }}>价格<span style={{ display: 'flex', flexDirection: 'column', paddingTop: '9px', paddingLeft: '3px' }}><ArrowUp2 onClick={() => setFil("ASC")} /><ArrowDown2 onClick={() => setFil("DESC")} /></span></span>
            <span>新品</span>
          </div>
          <div className="dlbox">
            {newLists.map(item => {
              return <dl key={item._id}>
                <dt>
                  <img style={{ width: '100%', height: '150px', borderRadius: '10px' }} src={'/img/' + item.imgsrc} />
                </dt>
                <div className='box2'>
                  <span style={{
                    textOverflow: 'ellipsis', overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    width: '120%'
                  }}>{item.name}</span>
                  <span>￥<span>{item.price}</span>
                  </span>
                  <span>劵前价 ￥{item.price + 100}</span>
                </div>
                <div className='box3'><ShoppingCart
                  style={{
                    color: 'orangered', fontSize: '25px',
                  }} onClick={() => {
                    shop(item)
                  }} /></div>
              </dl>
            })}
          </div>
        </div>
      </div>
    </div>
  )
}
